<template>
	<view class="tabBar-box" v-if="showPlan">
		<view class="tabBar-item" v-for="(item, index) in list" :key="index" @click.native="changeTabBar(index)"
			:class="{ active: defaultTab === index }">
			<image :src="defaultTab === index ? item.selectedIconPath : item.iconPath"></image>
			<text>{{ item.text }}</text>
		</view>
		<image class="tabBar-middle" src="/static/images/tabBar-middle.png" @click.native="changeTabBar1"></image>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	const props = defineProps({
		defaultTab: {
			type: [Number, String],
			default: "",
		},
		list: {
			type: Array,
			required: true,
			default: () => [],
		},
		showPlan: {
			type: Boolean,
			default: false
		}
	});
	let defaultTab = ref(0);

	onMounted(() => {
		defaultTab.value = props.defaultTab;
	});
	const emits = defineEmits(["handelTabBar"]);
	const changeTabBar = (index) => {
		defaultTab.value = index;
		emits("handelTabBar", index);
	};

	const changeTabBar1 = () => {
		uni.navigateTo({
			url: '/pages/selfProcurementPlan/selfProcurementPlan'
		})
	};
</script>

<style lang="scss" scoped>
	.tabBar-box {
		width: 646rpx;
		height: 36rpx;
		margin: 0 auto;
		padding: 40rpx 20rpx;
		position: fixed;
		left: 0;
		bottom: 35rpx;
		right: 0;
		z-index: 11;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: nowrap;
		border-radius: 999px;
		// box-shadow: var(
		//   --wot-tabbar-box-shadow,
		//   0 6px 30px 5px rgba(0, 0, 0, 0.05),
		//   0 16px 24px 2px rgba(0, 0, 0, 0.04),
		//   0 8px 10px -5px rgba(0, 0, 0, 0.08)
		// );
		box-shadow: 0px 16 64px 0px rgba(0, 0, 0, 0.16);
		// background-color: #fff;
		background: url('@/static/images/tabBar-bg.png') center center;

		.tabBar-item {
			width: 250rpx;
			// flex: 1;
			text-align: center;
			text-decoration: none;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;

			image {
				width: 42rpx;
				height: 42rpx;
				margin: 5px 0;
			}

			text {
				font-weight: 400;
				font-size: 20rpx;
				color: #8a8c9c;
				line-height: 23rpx;
				text-align: center;
				margin-bottom: 5px;
			}
		}

		.active {
			color: #007dff;
			background: #eef6ff;
			border-radius: 999px;
			border-radius: 1998rpx 1998rpx 1998rpx 1998rpx;

			text {
				color: #007dff;
			}
		}

		.tabBar-middle {
			position: absolute;
			width: 88rpx;
			height: 88rpx;
			left: 50%;
			top: 0;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			box-shadow: var(--wot-tabbar-box-shadow,
					0 5px 6px 0px #83C0FF);
		}
	}
</style>